<template>
    <rx-layout>
      <template #middle>
        <rx-fit v-model="fitSearch">
          <template #head>
            <div style="display: flex">
                <div class="table-operator" >
                    <a-button  type="primary" @click="add">
                        <PlusOutlined />
                        {{$ti18('rxList.newBtn','新建')}}
                    </a-button>
                    <a-dropdown v-if="editEnable && selectedRowKeys.length > 0 || removeEnable && selectedRowKeys.length > 0">
                        <a-button style="margin-left: 8px">
                            {{$ti18('rxList.moreBtn','更多')}}
                            <DownOutlined />
                        </a-button>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item key="1" v-if="editEnable && selectedRowKeys.length > 0" @click="editOne1()">
                                    <EditOutlined />
                                    {{$ti18('rxList.editBtn','编辑')}}
                                </a-menu-item>
                                <a-menu-item key="2" v-if="removeEnable && selectedRowKeys.length > 0" @click="delByIdsSelf()">
                                    <DeleteOutlined />
                                    {{$ti18('rxList.delBtn','删除')}}
                                </a-menu-item>
                                <a-menu-item
                                    key="3"
                                    @click="changeExport(selectedRows)"
                                    v-if="selectedRowKeys.length > 0"
                                >
                                    <SwitcherOutlined />
                                    {{$ti18('rxList.changeExport','切换导出')}}
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
                <div class="search-btn-box">
                    <span class="search-btn" @click="searchshow">
                      <SearchOutlined/>
                    {{ $ti18('rxList.leachBtn', '过滤') }}
                    </span>
                </div>
            </div>
          </template>
          <template #search>
            <a-form layout="vertical">
              <a-form-item :label="$ti18('rxForm.type','类型')">
                <rx-input-button :singleValue="false" @btnClick="selectDialog" v-model="typeSetting"></rx-input-button>
              </a-form-item>
              <a-form-item :label="i18n('form.role','角色')">
                <rx-input-button :singleValue="false" @btnClick="selectRole" v-model="roleSetting"></rx-input-button>
              </a-form-item>
            </a-form>
            <div class="list-search-toolbar">
              <a-button type="primary" @click="search">
                <SearchOutlined/>
                {{ $ti18('rxList.searchBtn', '查询') }}
              </a-button>
              <a-button style="margin-left: 4px" @click="resetSearch">
                {{ $ti18('rxList.resetBtn', '重置') }}
              </a-button>
            </div>
          </template>
          <template #middle>
            <rx-grid
                ref="table"
                :hasPage="true"
                :urlConfig="urlConfig"
                :selectConfig="selectConfig"
                :pageConfig="pageConfig"
                url="/api-form/form/core/formEntityDataSetting/queryRole"
                field="roleId"
                :columns="columns"
                @selectMethod="onSelectMethod"
            >
              <template #exportApp>
                {{ exportI18n('export.isExport','导出') }}
                <a-tooltip placement="top">
                  <template #title>
                    <span>{{ exportI18n('export.helpInfo','提示信息') }}</span>
                  </template>
                  <QuestionCircleOutlined />
                </a-tooltip>
              </template>
              <template #isExport="{row,rowIndex}">
                <a-tag :color="row.isExport == 1 ? 'green' : 'red'">
                  <span>{{ row.isExport == 1 ? exportI18n('export.yes','是') : exportI18n('export.no','否') }}</span>
                </a-tag>
              </template>
              <template #action="{ row, rowIndex }">
                <RxGridAction :size="2">
                  <div v-if="editEnable" @click.stop="edit1(row)">
                    {{$ti18('rxList.editBtn','编辑')}}
                  </div>
                  <div v-if="removeEnable" @click.stop="delByIdSelf(row)">
                    {{$ti18('rxList.delBtn','删除')}}
                  </div>
                  <div @click="setExport(row)">
                    {{row.isExport == 1 ? exportI18n('export.noExport','不导出') : exportI18n('export.exported','导出')}}
                  </div>
                </RxGridAction>
              </template>
            </rx-grid>
          </template>
        </rx-fit>
      </template>
    </rx-layout>
</template>

<script>

    import FormEntityDataSettingApi from '@/common/api/form/formEntityDataSetting'
    import FormEntityDataSettingEdit from './FormEntityDataSettingEdit.vue'
    import {BaseList,RxFit } from '@lowcode/jpaas-base-lib';
    import {ShareDialog,App} from '@lowcode/jpaas-share-component';
    export default {
        name: 'FormEntityDataSettingList',
        mixins: [BaseList,App],
        components: {
            RxFit,
        },
        data() {
            return {
                urlConfig: {
                  ajaxType: 'post',
                  contentType: 'json',
                  queryParam: {},
                  dataField: 'result.data',
                  totalField: 'result.totalCount'
                },
                selectConfig: {
                  type: 'checkbox'
                },
                pageConfig: {
                  pageSize: 10,
                  pageSizes: [10, 30, 40]
                },
                columns: [
                    {title: this.i18n('form.typeName','类型名称'), field: 'dataTypeName', minWidth: 100},
                    {title: this.i18n('form.roleName','角色名称'), field: 'roleName', minWidth: 100},
                    {
                      field: 'isExport',
                      slots: { header: 'exportApp',default:'isExport' },
                      minWidth: 100
                    },
                    {title: this.$ti18('rxList.action','操作'), minWidth: 80, field: 'action', slots: {default: 'action'}}
                ],
                component:FormEntityDataSettingEdit,
                comment:this.i18n('list.comment','业务实体数据配置'),
                widthHeight:['800px', '500px'],
                fitSearch:false,
                selectRecord:{},
                roleSetting:"",
                typeSetting:""
            }
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"formEntityDataSetting",key);
            },
            exportI18n(name,text,key){
                return this.$ti18(name,text,"appExport",key);
            },
            // 设置是否导出
            setExport(record) {
                let self_ = this;
                let param = {
                    pkId: record.pkId,
                    isExport: record.isExport == 1 ? 0 : 1
                };
                FormEntityDataSettingApi.update(param).then(res => {
                    if (res.success) {
                        self_.$message.success(res.message);
                        self_.loadData();
                    } else {
                        self_.$message.error(self_.exportI18n('export.settingFail','设置失败！'));
                    }
                });
            },

            //切换导出状态
            changeExport(rows){
                let self_ = this;
                let status = true;
                let count = 0;
                rows.forEach(item => {
                    let param = {
                        pkId: item.pkId,
                        isExport: item.isExport == 1 ? 0 : 1
                    };
                    FormEntityDataSettingApi.update(param).then(res => {
                        if (res.success) {
                            self_.loadData();
                        } else {
                            status = false;
                        }
                        if(status && count == 0){
                            self_.$message.success(self_.exportI18n('export.upDateSuccess','更新成功!'))
                        }else if(!status && count == 0){
                            self_.$message.error(self_.exportI18n('export.settingFail','设置失败！'));
                        }
                        count = count + 1;
                    });
                })
                self_.selectedRowKeys = [];
                self_.$refs.table.clearSelectedRows();
            },
            editOne1(){
                this.selectRecord=this.selectedRows[0]
                this.editOne();
            },
            edit1(record){
                this.selectRecord=record;
                this.edit(record)
            },
            //删除数据
            delByIdSelf(record) {
                let id=record.id;
                this.delConfirm(this,id)
            },
            //批量删除
            delByIdsSelf(){
                let ids="";
                for (let i=0;i<this.selectedRows.length;i++){
                    ids+=this.selectedRows[i].id+",";
                }
                ids=ids.substring(0,ids.lastIndexOf(","));
                this.delConfirm(this,ids);
            },
            delConfirm(self_,ids){
                this.$confirm({
                    title: this.$ti18('rxMsa.actionTips','操作提示'),
                    zIndex: 20000,
                    content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                    okText: this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                    onOk() {
                        FormEntityDataSettingApi.delByIds(ids).then(res => {
                            if (res.success && res.code == 200) {
                                self_.refreshGrid()
                            }
                            self_.selectedRowKeys = [];
                            self_.selectedRows = [];
                        })
                    },
                    onCancel() {
                    }
                })
            },
            getSelectRecord(){
                return this.selectRecord;
            },
            delById(ids){
                return FormEntityDataSettingApi.del({ ids: ids.join(',') });
            },
            resetSearch() {
              this.urlConfig.queryParam = {}
              this.$nextTick(() => {
                this.urlConfig.queryParam = {};
                let appId = this.curApp.appId;
                if (appId) {
                  this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
                }
                this.$refs[this.table].loadData();
              })
            },
            selectDialog(vm){
                var self=this;
                var config={curVm:this,widthHeight:['800px','600px'],data:{multiSelect:false}};
                ShareDialog.openFormEntityDataTypeDialog(config,function(row){
                    self.urlConfig.queryParam.Q_DATA_TYPE_ID__S_LK=row.id;
                    self.typeSetting=JSON.stringify({label:row.name,value:row.id});
                })
            },
            selectRole(vm){
                var self=this;
                ShareDialog.openGroupDialog({
                    curVm: this, data: {single: true,showDimId:false,dimId:'2'}, widthHeight: ['900px', '600px']
                }, function (data) {
                    self.urlConfig.queryParam.Q_ROLE_ID__S_LK=data.groupId;
                    self.roleSetting=JSON.stringify({label:data.name,value:data.groupId});
                })
            }
        }
    }
</script>
<style scoped>
.table-operator{
    flex: 1;
}
</style>

